<template>
  <div>
    <div class="diagnose_toolbar">
      <div>
        <span style="padding: 0 10px">
          <span v-if="!diagnoseItem['2'].salonNo" class="nav_info">先提交基础信息, 再选</span>
          择复盘项目:
        </span>
        <el-select
          v-model="selectedOption"
          placeholder="---请选择---"
          size="small"
          :disabled="!diagnoseItem['2'].salonNo"
          @change="addSelectTab">
          <el-option v-for="item in availableOptions" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </div>
      <div v-if="activeTabId != '2' && diagnoseItem['2'].salonNo" class="diagnose_salon_info">
        <div>
          <span class="info_name">门店名称:</span>
          <span class="info_value">{{ diagnoseItem['2'].salonName }}</span>
        </div>
        <div>
          <span class="info_name">复盘单号:</span>
          <span class="info_value">{{ diagnoseItem['2'].diagnoseNo }}</span>
        </div>
      </div>
    </div>
    <div class="tab_review_items">
      <el-tabs v-model="activeTabId" type="card" @tab-click="handleClickTab">
        <el-tab-pane v-if="tabVisible['1']" label="综合打分" name="1">
          <span slot="label">
            综合打分
            <el-popover v-model="popoverVisible['1']" placement="top" width="160">
              <p>确定删除该项？</p>
              <div style="text-align: right; margin: 0">
                <el-button size="mini" type="text" @click="popoverVisible['1'] = false">取消</el-button>
                <el-button type="primary" size="mini" @click="removeTab('1')">确定</el-button>
              </div>
              <i slot="reference" class="el-icon-circle-close"></i>
            </el-popover>
          </span>
        </el-tab-pane>
        <el-tab-pane v-if="tabVisible['2']" label="基础信息" name="2">
          <span slot="label">
            基础信息
            <el-popconfirm
              confirm-button-type="Text"
              confirm-button-text="知道了"
              cancel-button-text=""
              icon="el-icon-info"
              icon-color="red"
              title="核实基础信息是复盘的第一步, 必填, 不可删除">
              <i slot="reference" class="el-icon-warning-outline"></i>
            </el-popconfirm>
          </span>
          <diagnose2 ref="refDiagnose2" @updated="handleUpdatedDiagnose2"></diagnose2>
        </el-tab-pane>
        <el-tab-pane v-if="tabVisible['3']" label="【基本盘】业绩" name="3">
          <span slot="label">
            【基本盘】业绩
            <el-popover v-model="popoverVisible['3']" placement="top" width="160">
              <p>确定删除该项？</p>
              <div style="text-align: right; margin: 0">
                <el-button size="mini" type="text" @click="popoverVisible['3'] = false">取消</el-button>
                <el-button type="primary" size="mini" @click="removeTab('3')">确定</el-button>
              </div>
              <i slot="reference" class="el-icon-circle-close"></i>
            </el-popover>
          </span>
          <diagnose3 ref="refDiagnose3"></diagnose3>
        </el-tab-pane>
        <el-tab-pane v-if="tabVisible['4']" label="【基本盘】老客数据" name="4">
          <span slot="label">
            【基本盘】老客数据
            <el-popover v-model="popoverVisible['4']" placement="top" width="160">
              <p>确定删除该项？</p>
              <div style="text-align: right; margin: 0">
                <el-button size="mini" type="text" @click="popoverVisible['4'] = false">取消</el-button>
                <el-button type="primary" size="mini" @click="removeTab('4')">确定</el-button>
              </div>
              <i slot="reference" class="el-icon-circle-close"></i>
            </el-popover>
          </span>
          <diagnose4 ref="refDiagnose4"></diagnose4>
        </el-tab-pane>
        <el-tab-pane v-if="tabVisible['5']" label="【一阶】人力数据" name="5">
          <span slot="label">
            【一阶】人力数据
            <el-popover v-model="popoverVisible['5']" placement="top" width="160">
              <p>确定删除该项？</p>
              <div style="text-align: right; margin: 0">
                <el-button size="mini" type="text" @click="popoverVisible['5'] = false">取消</el-button>
                <el-button type="primary" size="mini" @click="removeTab('5')">确定</el-button>
              </div>
              <i slot="reference" class="el-icon-circle-close"></i>
            </el-popover>
          </span>
          <diagnose5 ref="refDiagnose5"></diagnose5>
        </el-tab-pane>
        <el-tab-pane v-if="tabVisible['6']" label="【一阶】客户运营" name="6">
          <span slot="label">
            【一阶】客户运营
            <el-popover v-model="popoverVisible['6']" placement="top" width="160">
              <p>确定删除该项？</p>
              <div style="text-align: right; margin: 0">
                <el-button size="mini" type="text" @click="popoverVisible['6'] = false">取消</el-button>
                <el-button type="primary" size="mini" @click="removeTab('6')">确定</el-button>
              </div>
              <i slot="reference" class="el-icon-circle-close"></i>
            </el-popover>
          </span>
          <diagnose6 ref="refDiagnose6"></diagnose6>
        </el-tab-pane>
        <el-tab-pane v-if="tabVisible['7']" label="【二阶】产品数据" name="7">
          <span slot="label">
            【二阶】产品数据
            <el-popover v-model="popoverVisible['7']" placement="top" width="160">
              <p>确定删除该项？</p>
              <div style="text-align: right; margin: 0">
                <el-button size="mini" type="text" @click="popoverVisible['7'] = false">取消</el-button>
                <el-button type="primary" size="mini" @click="removeTab('7')">确定</el-button>
              </div>
              <i slot="reference" class="el-icon-circle-close"></i>
            </el-popover>
          </span>
        </el-tab-pane>
        <el-tab-pane v-if="tabVisible['8']" label="【二阶】制度" name="8">
          <span slot="label">
            【二阶】制度
            <el-popover v-model="popoverVisible['8']" placement="top" width="160">
              <p>确定删除该项？</p>
              <div style="text-align: right; margin: 0">
                <el-button size="mini" type="text" @click="popoverVisible['8'] = false">取消</el-button>
                <el-button type="primary" size="mini" @click="removeTab('8')">确定</el-button>
              </div>
              <i slot="reference" class="el-icon-circle-close"></i>
            </el-popover>
          </span>
        </el-tab-pane>
        <el-tab-pane v-if="tabVisible['9']" label="【三阶】成本" name="9">
          <span slot="label">
            【三阶】成本
            <el-popover v-model="popoverVisible['9']" placement="top" width="160">
              <p>确定删除该项？</p>
              <div style="text-align: right; margin: 0">
                <el-button size="mini" type="text" @click="popoverVisible['9'] = false">取消</el-button>
                <el-button type="primary" size="mini" @click="removeTab('9')">确定</el-button>
              </div>
              <i slot="reference" class="el-icon-circle-close"></i>
            </el-popover>
          </span>
        </el-tab-pane>
        <el-tab-pane v-if="tabVisible['10']" label="【三阶】新客数据" name="10">
          <span slot="label">
            【三阶】新客数据
            <el-popover v-model="popoverVisible['10']" placement="top" width="160">
              <p>确定删除该项？</p>
              <div style="text-align: right; margin: 0">
                <el-button size="mini" type="text" @click="popoverVisible['10'] = false">取消</el-button>
                <el-button type="primary" size="mini" @click="removeTab('10')">确定</el-button>
              </div>
              <i slot="reference" class="el-icon-circle-close"></i>
            </el-popover>
          </span>
        </el-tab-pane>
        <el-tab-pane v-if="tabVisible['11']" label="【三阶】合规性（迎检）" name="11">
          <span slot="label">
            【三阶】合规性（迎检）
            <el-popover v-model="popoverVisible['11']" placement="top" width="160">
              <p>确定删除该项？</p>
              <div style="text-align: right; margin: 0">
                <el-button size="mini" type="text" @click="popoverVisible['11'] = false">取消</el-button>
                <el-button type="primary" size="mini" @click="removeTab('11')">确定</el-button>
              </div>
              <i slot="reference" class="el-icon-circle-close"></i>
            </el-popover>
          </span>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import * as apiSts from '@/api/_com_';
// 引入后端 API
import { getBaseDiagnoseLast } from '@/api/diagnose';
// 引入自定义组件
import '@/utils/datefmt';
import Diagnose2 from './pop/diagnose2.vue';
import Diagnose3 from './pop/diagnose3.vue';
import Diagnose4 from './pop/diagnose4.vue';
import Diagnose5 from './pop/diagnose5.vue';
import Diagnose6 from './pop/diagnose6.vue';
// 引入第三方组件
import { MessageBox } from 'element-ui';
import { mapGetters } from 'vuex';

const ReviewOptions = [
  { id: '1', name: '综合打分' },
  { id: '2', name: '基础信息' },
  { id: '3', name: '【基本盘】业绩' },
  { id: '4', name: '【基本盘】老客数据' },
  { id: '5', name: '【一阶】人力数据' },
  { id: '6', name: '【一阶】客户运营' },
  { id: '7', name: '【二阶】产品数据' },
  { id: '8', name: '【二阶】制度' },
  { id: '9', name: '【三阶】成本' },
  { id: '10', name: '【三阶】新客数据' },
  { id: '11', name: '【三阶】合规性（迎检）' },
];
export default {
  name: 'AddReview',
  components: {
    ['diagnose2']: Diagnose2,
    ['diagnose3']: Diagnose3,
    ['diagnose4']: Diagnose4,
    ['diagnose5']: Diagnose5,
    ['diagnose6']: Diagnose6,
  },
  data() {
    return {
      selectedOption: undefined,
      availableOptions: [],
      activeTabId: undefined,
      popoverVisible: {},
      tabsOpened: [],
      tabVisible: {},
      isFetching: false, // 通用的&互斥的, 加载后端数据
      diagnoseItem: {
        // 统筹管理所有诊断项目, key 是 ReviewOptions.id
        1: {},
        2: {},
        3: {},
        4: {},
        5: {},
        6: {},
        7: {},
        8: {},
        9: {},
        10: {},
        11: {},
      },
    };
  },
  computed: {
    ...mapGetters(['deptId', 'openId']),
  },
  created() {
    ReviewOptions.forEach(x => {
      this.$set(this.popoverVisible, x.id, false);
      this.$set(this.tabVisible, x.id, x.id == '2');
      if (x.id == '2') {
        return;
      }
      this.availableOptions.push(x);
    });
    this.activeTabId = '2';
  },
  methods: {
    handleClickTab: async function (tab, event) {
      const target = event.target || event.srcElement;
      const nodeName = target.nodeName;
      if (nodeName === 'I') {
        // 点击关闭标签
        return;
      }
      const clickTabId = tab.name;
      this.selectedOption = undefined;
      if (clickTabId == '2') {
        return;
      }
      this.loadTabData(clickTabId);
    },
    loadTabData: async function (tabId) {
      // 除了基础信息外, 其余每个标签页的数据初始化方法, 都是 loadDiagnoseData
      const refName = `refDiagnose${tabId}`;
      const refTab = this.$refs[refName];
      if (refTab) {
        refTab.loadDiagnoseData(this.diagnoseItem['2']);
      }
    },
    addSelectTab: async function (id) {
      const selectedIdx = this.availableOptions.findIndex(x => x.id === id);
      if (selectedIdx === undefined) {
        return;
      }
      this.$set(this.tabVisible, id, true);
      const selectedOption = this.availableOptions[selectedIdx];
      const idx = this.tabsOpened.findIndex(tab => tab.id === selectedOption.id);
      if (idx === -1) {
        this.tabsOpened.push(selectedOption);
      }
      this.activeTabId = selectedOption.id;
      this.availableOptions.splice(selectedIdx, 1);
      this.$set(this.popoverVisible, selectedOption.id, false);
      await this.$nextTick();
      this.loadTabData(id);
    },
    removeTab(id) {
      const removeIdx = this.tabsOpened.findIndex(x => x.id === id);
      if (removeIdx === undefined) {
        return;
      }
      this.$set(this.tabVisible, id, false);
      const removedOption = this.tabsOpened[removeIdx];
      const insertIndex = this.availableOptions.findIndex(
        x => Number.parseInt(x.id) > Number.parseInt(removedOption.id)
      );
      if (insertIndex === -1) {
        this.availableOptions.push(removedOption);
      } else {
        this.availableOptions.splice(insertIndex, 0, removedOption);
      }
      this.popoverVisible[id] = false;
      if (this.activeTabId === id) {
        this.activeTabId = '2';
        this.selectedOption = undefined;
      }
    },
    handleUpdatedDiagnose2: async function (ret) {
      if (!ret || !ret.diagnoseNo) {
        this.$set(this.diagnoseItem['2'], 'salonId', undefined);
        this.$set(this.diagnoseItem['2'], 'salonNo', undefined);
        this.$set(this.diagnoseItem['2'], 'salonName', undefined);
        this.$set(this.diagnoseItem['2'], 'diagnoseNo', undefined);
        return;
      }
      this.$set(this.diagnoseItem['2'], 'salonId', ret.salonId);
      this.$set(this.diagnoseItem['2'], 'salonNo', ret.salonNo);
      this.$set(this.diagnoseItem['2'], 'salonName', ret.salonName);
      this.$set(this.diagnoseItem['2'], 'diagnoseNo', ret.diagnoseNo);
    },
  },
};
</script>

<style lang="scss" scoped>
.tab_review_items {
  padding: 0 2px;
}
::v-deep .tab_review_items.el-tabs__nav-prev {
  width: 50px;
  font-size: 0.5rem;
}
::v-deep .tab_review_items.el-tabs__nav-next {
  width: 50px;
  font-size: 0.5rem;
}

.diagnose_toolbar {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 30px;

  .nav_info {
    color: rgb(64, 158, 255);
  }

  .diagnose_salon_info {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 15px;

    .info_name {
      font-weight: 500;
    }

    .info_value {
      margin: 0 0 0 5px;
      color: rgb(64, 158, 255);
      background-color: rgb(247, 224, 243);
    }
  }
}
</style>
